<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>ui5-list / ui5-li</title>


	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<script>// delete Document.prototype.adoptedStyleSheets;</script>
<link rel="stylesheet" type="text/css" href="./styles/List.css">

<style>
	ui5-avatar img {
		object-fit: contain;
	}

	#listWithWrapping ui5-li:nth-child(1)::part(title) {
		color: rgb(214, 20, 20);
	}

	#listWithWrapping ui5-li:nth-child(2)::part(description) {
		color: rgb(79, 128, 6);
	}
</style>
</head>

<body class="list1auto">
	<ui5-title>List growing="Scroll"</ui5-title>
	<label class="list2auto">new items loaded:</label>
	<label id="result" class="list2auto"> 0 times: 0</label>

	<ui5-list id="infiniteScrollEx" growing="Scroll" class="list3auto">
		<ui5-li-group header-text="New Items">
			<ui5-li icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.
				<ui5-avatar slot="image" shape="Square">
					<img src="./img/HT-1000.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo
				<ui5-avatar slot="image" shape="Square">
					<img src="./img/portrait.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"  additional-text-state="Information">IPhone 3
				<ui5-avatar slot="image" shape="Square">
					<img src="./img/HT-1022.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
		</ui5-li-group>

		<ui5-li-group header-text="Discounted Items">
			<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Required" additional-text-state="Negative">HP Monitor 24
				<ui5-avatar slot="image">
					<img src="./img/HT-1030.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Available" additional-text-state="Positive">Audio cabel
				<ui5-avatar slot="image">
					<img src="./img/HT-2026.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon-end icon="navigation-right-arrow" additional-text="Required" additional-text-state="Critical">DVD set
				<ui5-avatar slot="image">
					<img src="./img/HT-2002.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
		</ui5-li-group>

		<ui5-li-group header-text="Discounted Items">
			<ui5-li icon="navigation-right-arrow">HP Monitor 24
				<ui5-avatar slot="image">
					<img src="./img/HT-1030.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow">Audio cabel
				<ui5-avatar slot="image">
					<img src="./img/HT-2026.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow">DVD set
				<ui5-avatar slot="image">
					<img src="./img/HT-2002.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
		</ui5-li-group>
	</ui5-list>

	<br/><br/>

	<h2>List growing="Button" and growing-button-text property used</h2>
	<ui5-list id="infiniteScrollEx2" growing="Button" growing-button-text="Custom growing-button-text" class="list3auto">
		<ui5-li-group header-text="New Items">
			<ui5-li icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.
				<ui5-avatar slot="image" shape="Square">
					<img src="./img/HT-1000.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo
				<ui5-avatar slot="image" shape="Square">
					<img src="./img/portrait.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"  additional-text-state="Information">IPhone 3
				<ui5-avatar slot="image" shape="Square">
					<img src="./img/HT-1022.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
		</ui5-li-group>
	</ui5-list>


	<br/><br/>

	<h2>List with img tag</h2>
	<ui5-list id="infiniteScrollEx2" growing="Button" growing-button-text="Custom growing-button-text" class="list3auto">
		<ui5-li-group header-text="New Items">
			<ui5-li icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.
				<img src="./img/HT-1000.jpg" alt="Woman image" slot="image">
			</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo
				<img src="./img/portrait.jpg" alt="Woman image" slot="image">
			</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"  additional-text-state="Information">IPhone 3
				<img src="./img/HT-1022.jpg" alt="Woman image" slot="image">
			</ui5-li>
		</ui5-li-group>
	</ui5-list>

	<br/><br/>

	<h2>ui5-list</h2>

	<ui5-list header-text="API: ListItemGroup" selection-mode="Multiple">
		<ui5-li-group header-text="New Items">
			<ui5-li icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.
				<ui5-avatar slot="image">
					<img src="./img/HT-1000.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo
				<ui5-avatar slot="image">
					<img src="./img/HT-1010.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"  additional-text-state="Negative">IPhone 3
				<ui5-avatar slot="image">
					<img src="./img/HT-1022.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
		</ui5-li-group>

		<ui5-li-group header-text="Discounted Items">
			<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Required" additional-text-state="Negative">HP Monitor 24
				<ui5-avatar slot="image">
					<img src="./img/HT-1030.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Available" additional-text-state="Positive">Audio cabel
				<ui5-avatar slot="image">
					<img src="./img/HT-2026.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon-end icon="navigation-right-arrow" additional-text="Required" additional-text-state="Critical">DVD set
				<ui5-avatar slot="image">
					<img src="./img/HT-2002.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
		</ui5-li-group>

		<ui5-li-group header-text="Discounted Items">
			<ui5-li icon="navigation-right-arrow">HP Monitor 24
				<ui5-avatar slot="image">
					<img src="./img/HT-1030.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow">Audio cabel
				<ui5-avatar slot="image">
					<img src="./img/HT-2026.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
			<ui5-li icon="navigation-right-arrow">DVD set
				<ui5-avatar slot="image">
					<img src="./img/HT-2002.jpg" alt="Woman image">
				</ui5-avatar>
			</ui5-li>
		</ui5-li-group>
	</ui5-list>

	<br/><br/>

	<ui5-list header-text="API: icon">
		<ui5-li icon="navigation-right-arrow">Option 1</ui5-li>
	</ui5-list>

	<br/><br/>
	<hr />
	<br/><br/>

	<ui5-list header-text="API: image slot">
		<ui5-li>Avatar with src inside image slot
			<ui5-avatar slot="image">
				<img src="./img/HT-1000.jpg" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
		<ui5-li>Icon inside image slot
			<ui5-icon slot="image" name="bell"> </ui5-icon>
		</ui5-li>
		<ui5-li>Icon and Avatar with initials inside image slot
			<ui5-icon slot="image" name="bell"> </ui5-icon>
			<ui5-avatar slot="image" initials="AB"></ui5-avatar>
		</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-list header-text="API: ListItem type='Active/Inactive/Detail'" selection-mode="Single">
		<ui5-li >Active item - press</ui5-li>
		<ui5-li >Active item - press</ui5-li>
		<ui5-li selected type="Inactive">Inactive item</ui5-li>
		<ui5-li type="Inactive">Inactive item</ui5-li>
		<ui5-li type="Detail">Detail item</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-list id="inactiveMultiple" header-text="API: ListItem type='Inactive'" selection-mode="Multiple">
		<ui5-li type="Inactive">Inactive item</ui5-li>
		<ui5-li type="Inactive">Inactive item</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-list id="inactiveSingleSelect" header-text="API: ListItem type='Inactive'" selection-mode="SingleStart">
		<ui5-li type="Inactive">Inactive item</ui5-li>
		<ui5-li type="Inactive">Inactive item</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-list id="navigationListItems" header-text="API: ListItem type='Navigation'">
		<ui5-li type="Navigation">Navigation item</ui5-li>
		<ui5-li type="Navigation" icon="navigation-right-arrow">Navigation item</ui5-li>
	</ui5-list>
	<br />

	<br/><br/>

	<ui5-list id="navigatedItems" header-text="API: navigated" >
		<ui5-li type="Navigation" navigated>Navigated item</ui5-li>
		<ui5-li type="Navigation" navigated>Navigated item</ui5-li>
	</ui5-list>
	<br />

	<br/><br/>

	<ui5-list id="listPrevent" selection-mode="Single" header-text="Prevent selection change event">
		<ui5-li id="country1" >Argentina</ui5-li>
		<ui5-li id="country2" >Bulgaria</ui5-li>
		<ui5-li id="country3" >China</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-label id="itemClickPrevent">[prevented Event] itemClick :: n/a</ui5-label>

	<ui5-list id="myList" selection-mode="Single" header-text="API: selection-mode='Single'">
		<ui5-li id="country1" >Argentina</ui5-li>
		<ui5-li id="country2" >Bulgaria</ui5-li>
		<ui5-li id="country3" selected >China</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-label id="itemPress">[Event] itemPress :: n/a</ui5-label>
	<br/><br/>
	<ui5-label id="itemClick">[Event] itemClick :: n/a</ui5-label>
	<br/><br/>
	<ui5-label id="selectionChange">[Event] selectionChange :: n/a</ui5-label>
	<ui5-list id="myList2" selection-mode="SingleEnd" header-text="API: selection-mode='SingleEnd'">
		<ui5-li id="country1" >Argentina</ui5-li>
		<ui5-li id="country2" selected >Bulgaria</ui5-li>
		<ui5-li id="country3" >China</ui5-li>
		<ui5-li id="country4" >Italy</ui5-li>
		<ui5-li id="country5" >Vietnam</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-list id="myList3" selection-mode="SingleStart" header-text="API: selection-mode='SingleStart'">
		<ui5-li id="country1" >Dolor dolor ipsum culpa proident esse quis quis incididunt. Sunt duis eu ad deserunt dolor sunt Lorem incididunt est irure qui dolore minim consectetur. Voluptate minim veniam aliqua aute et consectetur magna commodo sit. Duis fugiat esse culpa ea velit sit excepteur duis deserunt aliquip minim laborum. Amet aliquip excepteur esse aute ut dolore labore.</ui5-li>
		<ui5-li id="country2"  selected>Bulgaria</ui5-li>
		<ui5-li id="country3" >China</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-label id="itemPress2">[Event] itemPress :: n/a</ui5-label>
	<br/><br/>
	<ui5-label id="selectionChange2">[Event] selectionChange :: n/a</ui5-label>
	<ui5-list id="myList4" selection-mode="Multiple" header-text="API: selection-mode='Multiple'">
		<ui5-li id="country1" selected>Argentina</ui5-li>
		<ui5-li id="country2">Bulgaria</ui5-li>
		<ui5-li id="country3">China</ui5-li>
	</ui5-list>

	<br/><br/>
	<div class="list4auto">
		<h3 id="infoLbl">Items 3/3</h3>
		<ui5-button id=	"resetBtn">Reset List</ui5-button>
	</div>

	<ui5-list id="myList5" selection-mode="Delete" header-text="API: selection-mode='Delete'">
		<ui5-li id="arg">Argentina</ui5-li>
		<ui5-li id="bg">Bulgaria</ui5-li>
		<ui5-li id="ch">China</ui5-li>
		<ui5-li type="Detail">Detail item</ui5-li>
		<ui5-li>Denmark
			<div slot="deleteButton">
				<ui5-button>Custom Delete Button</ui5-button>
			</div>
		</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-list header-text="API: ListItem selected">
		<ui5-li selected="selected">Laptop HP
			<ui5-avatar slot="image">
				<img src="./img/HT-1022.jpg" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
		<ui5-li>laptop Lenovo
			<ui5-avatar slot="image">
				<img src="./img/HT-1010.jpg" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
		<ui5-li>IPhone 3
			<ui5-avatar slot="image">
				<img src="./img/HT-1022.jpg" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-list header-text="API: Highlight">
		<ui5-li highlight="Negative">Laptop HP
			<ui5-avatar slot="image">
				<img src="./img/HT-1000.jpg" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
		<ui5-li highlight="Information">laptop Lenovo
			<ui5-avatar slot="image">
				<img src="./img/HT-1010.jpg" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
		<ui5-li highlight="Positive">IPhone 3
			<ui5-avatar slot="image">
				<img src="./img/HT-1022.jpg" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
		<ui5-li highlight="Critical">DVD set
			<ui5-avatar slot="image">
				<img src="./img/HT-2002.jpg" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-list header-text="API: noDataText" separators="None" no-data-text="No Data Available"></ui5-list>

	<ui5-list header-text="API: ListItemCustom" selection-mode="SingleEnd">
		<ui5-li-custom>
			<div class="list5auto">
				<ui5-button>Press me</ui5-button>
				<ui5-link>Go to SAP</ui5-link>
			</div>
		</ui5-li-custom>
		<ui5-li-custom>
			<div class="list5auto">
				<ui5-button>Press me</ui5-button>
				<ui5-link>Go to SAP</ui5-link>
			</div>
		</ui5-li-custom>
		<ui5-li-custom>
			<div class="list5auto">
				<ui5-button>Press me</ui5-button>
				<ui5-link>Go to SAP</ui5-link>
			</div>
		</ui5-li-custom>
	</ui5-list>

	<ui5-list header-text="API separators" separators="None">
		<ui5-li >Option 1</ui5-li>
		<ui5-li >Option 2</ui5-li>
		<ui5-li >Option 3</ui5-li>
	</ui5-list>
	<br/><br/>
	<ui5-list separators="Inner">
			<ui5-li >Option 1</ui5-li>
			<ui5-li >Option 2</ui5-li>
			<ui5-li >Option 3</ui5-li>
	</ui5-list>

	<h3>Growing Button with Custom ARIA Name and Description</h3>
	<ui5-list 
		id="growingButtonAccessibility" 
		growing="Button" 
		growing-button-text="Load More Items"
		header-text="Accessibility Demo">
		<ui5-li>Product A</ui5-li>
		<ui5-li>Product B</ui5-li>
		<ui5-li>Product C</ui5-li>
	</ui5-list>
	<br/><br/>

	<ui5-list
		id="keyboardTestList"
		selection-mode="Multiple"
		header-text="Text when no header provided"
		footer-text="Copyright"
		no-data-text="No data">

		<div slot="header" class="header">
			<ui5-button id="headerBtn" design="Accept">Export</ui5-button>
		</div>

		<!-- Items -->
		<ui5-li>Argentina</ui5-li>
		<ui5-li-custom selected>
				<ui5-button>Click me</ui5-button>
				<ui5-link href="https://www.google.bg" target="_blank">UI5 link</ui5-link>
				<ui5-radio-button text="Option B" disabled="disabled"></ui5-radio-button>
				<ui5-button>Click me</ui5-button>
		</ui5-li-custom>
		<ui5-li>China</ui5-li>
		<ui5-li-custom selected>
				<ui5-radio-button text="Option C" disabled="disabled"></ui5-radio-button>
		</ui5-li-custom>
	</ui5-list>

	<ui5-list growing="Button">
		<ui5-button slot="header">Header button</ui5-button>
		<ui5-li >Option 1</ui5-li>
		<ui5-li >Option 2</ui5-li>
		<ui5-li >Option 3</ui5-li>
	</ui5-list>

	<br />
	Change selectionMode:
	<ui5-select id="select">
		<ui5-option selected>None</ui5-option>
		<ui5-option>Single</ui5-option>
		<ui5-option>SingleStart</ui5-option>
		<ui5-option>SingleEnd</ui5-option>
		<ui5-option>Multiple</ui5-option>
		<ui5-option>Delete</ui5-option>
	</ui5-select>
	<ui5-list id="myList6" header-text="visualization of different combinations of icon / title / description / info / image - (Current selectionMode: None)">
		<ui5-li-custom>
			<div class="list5auto">
				<ui5-button>Press me</ui5-button>
				<ui5-link>Go to SAP</ui5-link>
			</div>
		</ui5-li-custom>
		<ui5-li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
		<ui5-li description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
		<ui5-li additional-text-state="Negative" additional-text="Lorem ipsum">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
		<ui5-li additional-text-state="Negative" additional-text="Lorem ipsum" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
		<ui5-li icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
		<ui5-li icon="home" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
		<ui5-li icon="home" additional-text-state="Negative" additional-text="Lorem ipsum">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
		<ui5-li icon="home" additional-text-state="Negative" additional-text="Lorem ipsum" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
		<ui5-li >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
			<ui5-avatar slot="image">
				<img src="./img/woman_avatar_5.png" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
		<ui5-li description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
			<ui5-avatar slot="image">
				<img src="./img/woman_avatar_5.png" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
		<ui5-li additional-text-state="Negative" additional-text="Lorem ipsum">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
			<ui5-avatar slot="image">
				<img src="./img/woman_avatar_5.png" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
		<ui5-li additional-text-state="Negative" additional-text="Lorem ipsum" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
			<ui5-avatar slot="image">
				<img src="./img/woman_avatar_5.png" alt="Woman image">
			</ui5-avatar>
		</ui5-li>
	</ui5-list>

	<br/><br/>
	<h2>With accessible description ref</h2>
	<ui5-label id="description">Accessible description ref works</ui5-label>
	<ui5-list accessible-description-ref="description">
		<ui5-li>Item 1</ui5-li>
		<ui5-li>Item 2</ui5-li>
		<ui5-li>Item 3</ui5-li>
	</ui5-list>

	<br/><br/>
	<h2>With accessible description</h2>
	<ui5-list accessible-description="Accessible description works">
		<ui5-li>Item 1</ui5-li>
		<ui5-li>Item 2</ui5-li>
		<ui5-li>Item 3</ui5-li>
	</ui5-list>

	<br>

	<div id="host">
		<template shadowrootmode="open">
		   <span>I'm in the shadow DOM</span>
		   <ui5-list header-text="API: ListItemCustom" selection-mode="SingleEnd">
			  <ui5-li-custom>
				 <div class="list5auto">
					<ui5-button>Press me</ui5-button>
					<ui5-link>Go to SAP</ui5-link>
				 </div>
			  </ui5-li-custom>
			  <ui5-li-custom>
				 <div class="list5auto">
					<ui5-button>Press me</ui5-button>
					<ui5-link>Go to SAP</ui5-link>
				 </div>
			  </ui5-li-custom>
			  <ui5-li-custom>
				 <div class="list5auto">
					<ui5-button>Press me</ui5-button>
					<ui5-link>Go to SAP</ui5-link>
				 </div>
			  </ui5-li-custom>
		   </ui5-list>
		</template>
	</div>

	<br/><br/>

	<ui5-title size="H2">List wrapping behavior</ui5-title>

	<br/>

	<ui5-label for="selectWrapping">Change selectionMode:</ui5-label>
	<ui5-select id="selectWrapping">
		<ui5-option selected>None</ui5-option>
		<ui5-option>Single</ui5-option>
		<ui5-option>SingleStart</ui5-option>
		<ui5-option>SingleEnd</ui5-option>
		<ui5-option>Multiple</ui5-option>
		<ui5-option>Delete</ui5-option>
	</ui5-select>

	<ui5-list id="listWithWrapping" header-text="List wrapping behavior (Current selectionMode: None)">
		<ui5-li wrapping-type="Normal" text="List item with title"></ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title and description" description="Description"></ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title and additional text" additional-text="Additional text content"></ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title, description and additional text" description="Description"
			additional-text="Additional text content"></ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title, description and image" description="Description">
			<ui5-avatar slot="image" initials="JD" color-scheme="Accent1"></ui5-avatar>
		</ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title, additional text and image" additional-text="Additional text content">
			<ui5-avatar slot="image" initials="PM" color-scheme="Accent2"></ui5-avatar>
		</ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title, description, additional text and image" description="Description"
			additional-text="Additional text content">
			<ui5-avatar slot="image" initials="GK" color-scheme="Accent7"></ui5-avatar>
		</ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title, description, additional text and image" description="Description"
			additional-text="-00005" additional-text-state="Negative">
			<ui5-avatar slot="image" initials="PI" color-scheme="Accent9"></ui5-avatar>
		</ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title, description, additional text and image" description="Description"
			additional-text="00050000032" additional-text-state="Positive">
			<ui5-avatar slot="image" initials="IB" color-scheme="Accent8"></ui5-avatar>
		</ui5-li>
		<ui5-li wrapping-type="Normal">
			List item with title (by default it truncates) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto quo impedit laudantium perferendis et alias modi ea eaque. Quibusdam ex ipsa aspernatur tempora quia culpa et facilis labore reiciendis consectetur asperiores rem quis, eveniet autem placeat distinctio reprehenderit veniam magnam! Vitae quis exercitationem repudiandae, ipsum deleniti veritatis doloremque dolor quo labore, qui at omnis! Laborum molestias consequatur modi incidunt quidem natus unde odio voluptatibus debitis fugiat voluptates tempora, ipsam et ducimus suscipit magni, voluptate iste. Omnis modi dolor voluptatibus soluta nobis, enim repudiandae accusantium adipisci, eaque suscipit nemo? Iure ab maiores eius quos qui iusto hic neque, a minima.
		</ui5-li>
		<ui5-li>
			<b>List item with title</b> (by default it truncates) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto quo impedit laudantium perferendis et alias modi ea eaque. Quibusdam ex ipsa aspernatur tempora quia culpa et facilis labore reiciendis consectetur asperiores rem quis, eveniet autem placeat distinctio reprehenderit veniam magnam! Vitae quis exercitationem repudiandae, ipsum deleniti veritatis doloremque dolor quo labore, qui at omnis! Laborum molestias consequatur modi incidunt quidem natus unde odio voluptatibus debitis fugiat voluptates tempora, ipsam et ducimus suscipit magni, voluptate iste. Omnis modi dolor voluptatibus soluta nobis, enim repudiandae accusantium adipisci, eaque suscipit nemo? Iure ab maiores eius quos qui iusto hic neque, a minima.
		</ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title (wrapping enabled)"></ui5-li>
		<ui5-li wrapping-type="Normal" text="List item with title (wrapping enabled) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis accusantium voluptatibus quos id aspernatur numquam sequi distinctio nisi iusto! Totam placeat distinctio, iure dolores, porro ducimus cupiditate laboriosam laborum asperiores dolor rerum dolorem eaque assumenda laudantium corrupti sunt odio inventore ratione repellat error? Quod quia reprehenderit odio, nihil libero in."></ui5-li>
		<ui5-li wrapping-type="Normal"
			text="List item with title and description (wrapping enabled) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto quo impedit laudantium perferendis et alias modi ea eaque. Quibusdam ex ipsa aspernatur tempora quia culpa et facilis labore reiciendis consectetur asperiores rem quis, eveniet autem placeat distinctio reprehenderit veniam magnam! Vitae quis exercitationem repudiandae, ipsum deleniti veritatis doloremque dolor quo labore, qui at omnis! Laborum molestias consequatur modi incidunt quidem natus unde odio voluptatibus debitis fugiat voluptates tempora, ipsam et ducimus suscipit magni, voluptate iste. Omnis modi dolor voluptatibus soluta nobis, enim repudiandae accusantium adipisci, eaque suscipit nemo? Iure ab maiores eius quos qui iusto hic neque, a minima."
			description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias iure odio unde accusamus nam sed aperiam labore assumenda, repellat inventore deleniti vel, quos ipsum corrupti. Labore dolores reiciendis aut voluptates enim voluptas quod fugiat ad dolorum harum? Velit ex inventore tempore obcaecati, quae similique explicabo consectetur quos? Atque ducimus repudiandae, laborum maiores quidem alias et perferendis voluptatibus sit at. Earum excepturi iusto beatae et. Delectus eos illum consequuntur molestias tempora atque repudiandae, tempore soluta commodi adipisci, a saepe corrupti maxime quia aperiam rem praesentium, facere voluptatem alias quasi. Cumque blanditiis praesentium expedita iure sint totam alias animi sed at illum.">
		</ui5-li>
		<ui5-li wrapping-type="Normal"
			text="List item with title and description (wrapping enabled) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto quo impedit laudantium perferendis et alias modi ea eaque. Quibusdam ex ipsa aspernatur tempora quia culpa et facilis labore reiciendis consectetur asperiores rem quis, eveniet autem placeat distinctio reprehenderit veniam magnam! Vitae quis exercitationem repudiandae, ipsum deleniti veritatis doloremque dolor quo labore, qui at omnis! Laborum molestias consequatur modi incidunt quidem natus unde odio voluptatibus debitis fugiat voluptates tempora, ipsam et ducimus suscipit magni, voluptate iste. Omnis modi dolor voluptatibus soluta nobis, enim repudiandae accusantium adipisci, eaque suscipit nemo? Iure ab maiores eius quos qui iusto hic neque, a minima."
			description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias iure odio unde accusamus nam sed aperiam labore assumenda, repellat inventore deleniti vel, quos ipsum corrupti. Labore dolores reiciendis aut voluptates enim voluptas quod fugiat ad dolorum harum? Velit ex inventore tempore obcaecati, quae similique explicabo consectetur quos? Atque ducimus repudiandae, laborum maiores quidem alias et perferendis voluptatibus sit at. Earum excepturi iusto beatae et. Delectus eos illum consequuntur molestias tempora atque repudiandae, tempore soluta commodi adipisci, a saepe corrupti maxime quia aperiam rem praesentium, facere voluptatem alias quasi. Cumque blanditiis praesentium expedita iure sint totam alias animi sed at illum."
			additional-text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium harum, voluptatem alias unde doloremque ab quae ipsam! Quisquam aliquid repellendus praesentium nisi sed quod beatae nesciunt consequatur, molestias, asperiores aperiam.">
		</ui5-li>
		<ui5-li wrapping-type="Normal"
			text="List item with title and description (wrapping enabled) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto quo impedit laudantium perferendis et alias modi ea eaque. Quibusdam ex ipsa aspernatur tempora quia culpa et facilis labore reiciendis consectetur asperiores rem quis, eveniet autem placeat distinctio reprehenderit veniam magnam! Vitae quis exercitationem repudiandae, ipsum deleniti veritatis doloremque dolor quo labore, qui at omnis! Laborum molestias consequatur modi incidunt quidem natus unde odio voluptatibus debitis fugiat voluptates tempora, ipsam et ducimus suscipit magni, voluptate iste. Omnis modi dolor voluptatibus soluta nobis, enim repudiandae accusantium adipisci, eaque suscipit nemo? Iure ab maiores eius quos qui iusto hic neque, a minima."
			description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias iure odio unde accusamus nam sed aperiam labore assumenda, repellat inventore deleniti vel, quos ipsum corrupti. Labore dolores reiciendis aut voluptates enim voluptas quod fugiat ad dolorum harum? Velit ex inventore tempore obcaecati, quae similique explicabo consectetur quos? Atque ducimus repudiandae, laborum maiores quidem alias et perferendis voluptatibus sit at. Earum excepturi iusto beatae et. Delectus eos illum consequuntur molestias tempora atque repudiandae, tempore soluta commodi adipisci, a saepe corrupti maxime quia aperiam rem praesentium, facere voluptatem alias quasi. Cumque blanditiis praesentium expedita iure sint totam alias animi sed at illum."
			additional-text="⚠️ Only few left in stock">
			<ui5-avatar slot="image" initials="JD" color-scheme="Accent1"></ui5-avatar>
		</ui5-li>
		<ui5-li wrapping-type="Normal" icon="da" icon-end
			text="List item with title and description (wrapping enabled) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto quo impedit laudantium perferendis et alias modi ea eaque. Quibusdam ex ipsa aspernatur tempora quia culpa et facilis labore reiciendis consectetur asperiores rem quis, eveniet autem placeat distinctio reprehenderit veniam magnam! Vitae quis exercitationem repudiandae, ipsum deleniti veritatis doloremque dolor quo labore, qui at omnis! Laborum molestias consequatur modi incidunt quidem natus unde odio voluptatibus debitis fugiat voluptates tempora, ipsam et ducimus suscipit magni, voluptate iste. Omnis modi dolor voluptatibus soluta nobis, enim repudiandae accusantium adipisci, eaque suscipit nemo? Iure ab maiores eius quos qui iusto hic neque, a minima."
			description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias iure odio unde accusamus nam sed aperiam labore assumenda, repellat inventore deleniti vel, quos ipsum corrupti. Labore dolores reiciendis aut voluptates enim voluptas quod fugiat ad dolorum harum? Velit ex inventore tempore obcaecati, quae similique explicabo consectetur quos? Atque ducimus repudiandae, laborum maiores quidem alias et perferendis voluptatibus sit at. Earum excepturi iusto beatae et. Delectus eos illum consequuntur molestias tempora atque repudiandae, tempore soluta commodi adipisci, a saepe corrupti maxime quia aperiam rem praesentium, facere voluptatem alias quasi. Cumque blanditiis praesentium expedita iure sint totam alias animi sed at illum."
			additional-text="⚠️ Only few left in stock">
			<ui5-avatar slot="image" initials="JD" color-scheme="Accent1"></ui5-avatar>
		</ui5-li>
		<ui5-li wrapping-type="Normal"
			text="List item with title and description (wrapping enabled) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto quo impedit laudantium perferendis et alias modi ea eaque. Quibusdam ex ipsa aspernatur tempora quia culpa et facilis labore reiciendis consectetur asperiores rem quis, eveniet autem placeat distinctio reprehenderit veniam magnam! Vitae quis exercitationem repudiandae, ipsum deleniti veritatis doloremque dolor quo labore, qui at omnis! Laborum molestias consequatur modi incidunt quidem natus unde odio voluptatibus debitis fugiat voluptates tempora, ipsam et ducimus suscipit magni, voluptate iste. Omnis modi dolor voluptatibus soluta nobis, enim repudiandae accusantium adipisci, eaque suscipit nemo? Iure ab maiores eius quos qui iusto hic neque, a minima."
			additional-text="⚠️ Only few left in stock">
			<ui5-avatar slot="image" initials="JD" color-scheme="Accent1"></ui5-avatar>
		</ui5-li>
		<ui5-li wrapping-type="Normal"
			text="List item with title and description (wrapping enabled) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto quo impedit laudantium perferendis et alias modi ea eaque. Quibusdam ex ipsa aspernatur tempora quia culpa et facilis labore reiciendis consectetur asperiores rem quis, eveniet autem placeat distinctio reprehenderit veniam magnam! Vitae quis exercitationem repudiandae, ipsum deleniti veritatis doloremque dolor quo labore, qui at omnis! Laborum molestias consequatur modi incidunt quidem natus unde odio voluptatibus debitis fugiat voluptates tempora, ipsam et ducimus suscipit magni, voluptate iste. Omnis modi dolor voluptatibus soluta nobis, enim repudiandae accusantium adipisci, eaque suscipit nemo? Iure ab maiores eius quos qui iusto hic neque, a minima.">
			<ui5-avatar slot="image" initials="JD" color-scheme="Accent1"></ui5-avatar>
		</ui5-li>
		<ui5-li wrapping-type="Normal" icon="action"
			text="List item with title and description (wrapping enabled) -- Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto quo impedit laudantium perferendis et alias modi ea eaque. Quibusdam ex ipsa aspernatur tempora quia culpa et facilis labore reiciendis consectetur asperiores rem quis, eveniet autem placeat distinctio reprehenderit veniam magnam! Vitae quis exercitationem repudiandae, ipsum deleniti veritatis doloremque dolor quo labore, qui at omnis! Laborum molestias consequatur modi incidunt quidem natus unde odio voluptatibus debitis fugiat voluptates tempora, ipsam et ducimus suscipit magni, voluptate iste. Omnis modi dolor voluptatibus soluta nobis, enim repudiandae accusantium adipisci, eaque suscipit nemo? Iure ab maiores eius quos qui iusto hic neque, a minima.">
		</ui5-li>
		<ui5-li text="List item with title and navigated" navigated>
		</ui5-li>
		<ui5-li text="List item with title and negative highlight" highlight="Negative">
		</ui5-li>
		<ui5-li text="List item with title and selected" selected>
		</ui5-li>
		<ui5-li text="List item with title and icon" icon="home">
		</ui5-li>
		<ui5-li text="List item with title, icon and description" icon="home" description="Description">
		</ui5-li>
		<ui5-li text="List item with title, icon and additional text" icon="home" additional-text="Additional text content">
		</ui5-li>
		<ui5-li text="List item with title, icon, description and additional text" icon="home" description="Description"
			additional-text="Additional text content">
		</ui5-li>
		<ui5-li text="List item with title, icon, description and image" icon="home" description="Description">
			<ui5-avatar slot="image" initials="JD" color-scheme="Accent1"></ui5-avatar>
		</ui5-li>
		<ui5-li text="List item with title, icon, additional text and image" icon="home" icon-end description="Description"
			additional-text="Additional text content">
			<ui5-avatar slot="image" initials="PM" color-scheme="Accent2"></ui5-avatar>
		</ui5-li>
		<ui5-li text="List item with title and wrapping" wrapping-type="Normal" additional-text="Additional text content" additional-text-state="Critical">
		</ui5-li>
		<ui5-li text="List item with title and wrapping" wrapping-type="Normal" additional-text="Additional text content" additional-text-state="Negative">
		</ui5-li>
		<ui5-li text="List item with title and wrapping" wrapping-type="Normal" additional-text="Additional text content" additional-text-state="Positive">
		</ui5-li>
		<ui5-li text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam qui in dolorem! In, repellat. Esse nesciunt deserunt veritatis magnam delectus a? Fugiat sit est dolore eveniet. Quibusdam voluptas est obcaecati harum neque nobis sapiente ipsum dolorum porro alias, illum facilis! Consequuntur perspiciatis vel quae eum error necessitatibus ut illo hic vero ab odio impedit sit adipisci et, doloremque dolore porro dolorem officia. Molestias atque, soluta minus architecto quia cumque fuga veniam fugit minima mollitia facere esse, eveniet ad amet iusto modi iure rerum? Ipsa eligendi numquam ducimus quam reprehenderit aperiam sapiente adipisci debitis, illo, rerum optio eveniet ipsum vel nemo." wrapping-type="Normal" additional-text="Additional text content" additional-text-state="Information">
			<ui5-avatar slot="image" initials="JD" color-scheme="Accent1"></ui5-avatar>
		</ui5-li>
		<ui5-li text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam qui in dolorem! In, repellat. Esse nesciunt deserunt veritatis magnam delectus a? Fugiat sit est dolore eveniet. Quibusdam voluptas est obcaecati harum neque nobis sapiente ipsum dolorum porro alias, illum facilis! Consequuntur perspiciatis vel quae eum error necessitatibus ut illo hic vero ab odio impedit sit adipisci et, doloremque dolore porro dolorem officia. Molestias atque, soluta minus architecto quia cumque fuga veniam fugit minima mollitia facere esse, eveniet ad amet iusto modi iure rerum? Ipsa eligendi numquam ducimus quam reprehenderit aperiam sapiente adipisci debitis, illo, rerum optio eveniet ipsum vel nemo." wrapping-type="Normal" additional-text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam qui in dolorem! In, repellat. Esse nesciunt deserunt veritatis magnam delectus a? Fugiat sit est dolore eveniet." additional-text-state="Positive" description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam qui in dolorem! In, repellat. Esse nesciunt deserunt veritatis magnam delectus a? Fugiat sit est dolore eveniet. Quibusdam voluptas est obcaecati harum neque nobis sapiente ipsum dolorum porro alias, illum facilis!">
			<ui5-avatar slot="image" initials="JD" color-scheme="Accent1"></ui5-avatar>
		</ui5-li>
		<ui5-li text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam qui in dolorem! In, repellat. Esse nesciunt deserunt veritatis magnam delectus a? Fugiat sit est dolore eveniet. Quibusdam voluptas est obcaecati harum neque nobis sapiente ipsum dolorum porro alias, illum facilis! Consequuntur perspiciatis vel quae eum error necessitatibus ut illo hic vero ab odio impedit sit adipisci et, doloremque dolore porro dolorem officia. Molestias atque, soluta minus architecto quia cumque fuga veniam fugit minima mollitia facere esse, eveniet ad amet iusto modi iure rerum? Ipsa eligendi numquam ducimus quam reprehenderit aperiam sapiente adipisci debitis, illo, rerum optio eveniet ipsum vel nemo." wrapping-type="Normal" description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam qui in dolorem! In, repellat. Esse nesciunt deserunt veritatis magnam delectus a? Fugiat sit est dolore eveniet. Quibusdam voluptas est obcaecati harum neque nobis sapiente ipsum dolorum porro alias, illum facilis! Consequuntur perspiciatis vel quae eum error necessitatibus ut illo hic vero ab odio impedit sit adipisci et, doloremque dolore porro dolorem officia. Molestias atque, soluta minus architecto quia cumque fuga veniam fugit minima mollitia facere esse, eveniet ad amet iusto modi iure rerum? Ipsa eligendi numquam ducimus quam reprehenderit aperiam sapiente adipisci debitis, illo, rerum optio eveniet ipsum vel nemo.">
			<ui5-avatar slot="image" initials="JD" color-scheme="Accent1"></ui5-avatar>
		</ui5-li>
	</ui5-list>

	<br/><br/>

	<ui5-title size="H2">ListItemCustom with ExpandableText for Wrapping</ui5-title>

	<br/>

	<ui5-list header-text="Custom wrapping with ExpandableText component">
		<ui5-li-custom>
			<div class="product-item">
				<ui5-avatar initials="JD" color-scheme="Accent1"></ui5-avatar>
				<div class="product-details">
					<ui5-title size="H5">Product with Long Description</ui5-title>
					<ui5-expandable-text 
						max-characters="200"
						text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.">
					</ui5-expandable-text>
					<ui5-label>Product ID: #12345</ui5-label>
				</div>
				<div class="product-price">
					<ui5-label>€1,299.00</ui5-label>
					<ui5-label>In Stock</ui5-label>
				</div>
			</div>
		</ui5-li-custom>
	</ui5-list>

	<script>
		'use strict';

		var mutated = false;
		var singleSelectList = document.getElementById('myList');
		var singleSelectEndList = document.getElementById('myList2');
		var multiSelectList = document.getElementById('myList4');
		var singleSelectListPrevent = document.getElementById('listPrevent');
		var listWithWrapping = document.getElementById('listWithWrapping');

		var list = document.getElementById('myList5');
		var resetBtn = document.getElementById('resetBtn');
		var infoLbl = document.getElementById('infoLbl');
		var lblItemPress = document.getElementById('itemPress');
		var lblItemClick = document.getElementById('itemClick');
		var lblSelectionChange = document.getElementById('selectionChange');
		var lblitemClickPrevent = document.getElementById('itemClickPrevent');
		var lblItemPress2 = document.getElementById('itemPress2');
		var lblSelectionChange2 = document.getElementById('selectionChange2');
		var visualizationList = document.getElementById('myList6');
		var select = document.getElementById('select');
		var selectWrapping = document.getElementById('selectWrapping');
		var growingButtonTest = document.getElementById('growingButtonAccessibility');

		var selectionModes = {
			"None": undefined,
			"Single": "Single",
			"SingleStart": "SingleStart",
			"SingleEnd": "SingleEnd",
			"Multiple": "Multiple",
			"Delete": "Delete"
		}
		var items = ["<ui5-li id='arg'>Argentina</ui5-li>", "<ui5-li id='bg'>Bulgaria</ui5-li>", "<ui5-li id='ch'>China</ui5-li>"];
		var info = {
			0: "0/3", 1: "1/3", 2: "2/3", 3: "3/3"
		};

		growingButtonTest.accessibilityAttributes = {
			growingButton: {
				name: "Load more products",
				description: "This button will load additional products to the list. Click or press Enter to see more items."
			}
		};

		select.addEventListener("ui5-change", function (event) {
			var value = event.detail.selectedOption.textContent;

			visualizationList.selectionMode = selectionModes[value];
			visualizationList.headerText = visualizationList.headerText.replace(/\(.+\)/, "(Current selectionMode: " + value + ")");
		});

		selectWrapping.addEventListener("ui5-change", function (event) {
			var value = event.detail.selectedOption.textContent;

			listWithWrapping.selectionMode = selectionModes[value];
			listWithWrapping.headerText = listWithWrapping.headerText.replace(/\(.+\)/, "(Current selectionMode: " + value + ")");
		});

		var getItems = function getItems(items) {
			return items.map(function (item) {
				return '<ui5-li  id="' + item.id + '">' + item.textContent + '</ui5-li>';
			}).join("");
		};

		var cleanList = function cleanList() {
			while (list.firstChild) {
				list.removeChild(list.firstChild);
			}
		};

		var fillList = function fillList(content) {
			list.insertAdjacentHTML('afterbegin', content);
		};

		var resetList = function resetList() {
			if (!mutated) {
				return;
			}

			mutated = false;
			cleanList();
			fillList(items.join(""));
			updateInfo(3);
		};

		var updateInfo = function updateInfo(count) {
			infoLbl.innerHTML = "Items " + info[count];
		};

		list.addEventListener("ui5-item-delete", function (event) {
			var item = event.detail.item;
			var newItems = list.items.filter(function (x) {
				return x.id !== item.id;
			});
			var newItemsString = getItems(newItems);

			mutated = true;

			cleanList();
			fillList(newItemsString);
			updateInfo(newItems.length);
		});

		resetBtn.addEventListener("click", resetList);

		singleSelectListPrevent.addEventListener("ui5-item-click", function (event) {
			event.preventDefault();
			var clickedItem = event.detail.item;
			lblitemClickPrevent.innerHTML = "[Prevented Event] itemClick :: " + clickedItem.id;
		});

		singleSelectList.addEventListener("ui5-selection-change", function (event) {
			var selectedItems = event.detail.selectedItems;

			alert("Selection changed: " + selectedItems.map(function(item) { return item.id}).join("/"));
		});

		singleSelectEndList.addEventListener("ui5-item-press", function (event) {
			var pressedItem = event.detail.item;
			lblItemPress.innerHTML = "Event] itemPress :: " + pressedItem.id;
		});
		singleSelectEndList.addEventListener("ui5-item-click", function (event) {
			lblItemClick.innerHTML = "Event] itemClick :: " + event.detail.item.id;
		});

		singleSelectEndList.addEventListener("ui5-selection-change", function (event) {
			var selectedItems = event.detail.selectedItems;
			lblSelectionChange.innerHTML = "|Event] selectionChange :: " + selectedItems.map(function(item) { return item.id}).join("/");
		});

		multiSelectList.addEventListener("ui5-item-press", function (event) {
			var pressedItem = event.detail.item;
			lblItemPress2.innerHTML = "Event] itemPress :: " + pressedItem.id;
		});

		multiSelectList.addEventListener("ui5-selection-change", function (event) {
			var selectedItems = event.detail.selectedItems;
			lblSelectionChange2.innerHTML = "Event] selectionChange :: " + selectedItems.map(function(item) { return item.id}).join("/");
		});

		function template(i) {
			var li = document.createElement("ui5-li");
			li.textContent = "Title";
			li.description = "my description goes here " + i;
			li.additionalText = "Available";
			return li;
		}

		function insertItems(el, num) {
			for(var i= 0; i<num; i++) {
				el.appendChild(template(i));
			}
		}

		var itemsLoadedTotal = 0;
		var itemsToLoad = 5;
		var loadedCount = 0;

		infiniteScrollEx.addEventListener("ui5-load-more", function(e) {
			var el = infiniteScrollEx;
			el.loading = true;

			setTimeout(function() {
				insertItems(el, 3);
				el.loading = false;
				result.textContent = (++loadedCount) + " times " + (itemsLoadedTotal += itemsToLoad);
			}, 1000);
		});


		infiniteScrollEx2.addEventListener("ui5-load-more", function(e) {
			var el = infiniteScrollEx2;
			el.loading = true;

			setTimeout(function() {
				insertItems(el, 3);
				el.loading = false;
				result.textContent = (++loadedCount) + " times " + (itemsLoadedTotal += itemsToLoad);
			}, 1000);
		});

	</script>
</body>
</html>